<template>
  <el-dialog :title="titleMap[mode]" v-model="visible" :width="1500"
             destroy-on-close @closed="$emit('closed')" align-center :close-on-click-modal="false"
             :close-on-press-escape="mode != 'show' ? false : true">
    <el-form :model="form" :rules="rules" :disabled="mode=='show'" label-width="110" ref="dialogForm">
      <el-row :gutter="1">
        <el-col :span="6">
          <el-form-item label="任务名称" prop="title">
            <el-input v-model="form.title" placeholder="请输入任务名称" clearable readonly></el-input>
          </el-form-item>
        </el-col>
        <!--				<el-col :span="6">-->
        <!--					<el-form-item label="跟进状态" prop="status">-->
        <!--						<el-select v-model="form.status" placeholder="选择跟进状态" filterable>-->
        <!--							<el-option v-for="item in follow_status" :key="item.value" :label="item.name" :value="Number(item.value)"/>-->
        <!--						</el-select>-->
        <!--					</el-form-item>-->
        <!--				</el-col>-->
        <el-col :span="10">
          <el-form-item label="跟进进度" prop="progress_ratio">
            <div style="display: flex;align-items: center;">
              <el-progress v-if="progress_ratio_list && progress_ratio_list.length>0" style="width: 300px;"
                           :percentage="form.progress_ratio" :color="progress_ratio_list" :stroke-width="12"></el-progress>
              <el-button-group>
                <el-button icon="el-icon-minus" @click="decrease"></el-button>
                <el-button icon="el-icon-plus" @click="increase"></el-button>
              </el-button-group>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="1">
        <el-col :span="24">
          <sc-editor v-model="form.content" placeholder="请输入" :height="600"></sc-editor>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <el-button @click="visible=false">取 消</el-button>
      <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit(1)">保存</el-button>
    </template>
  </el-dialog>
</template>

<script>
import {defineAsyncComponent} from 'vue';

const scEditor = defineAsyncComponent(() => import('@/components/scEditor'));
export default {
  components: {
    scEditor
  },
  emits: ['success', 'closed'],
  data() {
    return {
      mode: "add",
      titleMap: {
        add: '新增任务跟进',
        edit: '新增任务跟进',
        show: '新增任务跟进',
      },
      visible: false,
      isSaveing: false,
      form: {
        id: "",
        title: '',
        content: '',
        // status:'',
        progress_ratio: 0
      },
      stage: false,
      rules: {
        content: [
          {required: true, message: '请输入跟进内容'}
        ],
        progress_ratio: [
          {required: true, message: '选择跟进进度'}
        ],
      },
      dialog: {},
      // follow_status:[],
      progress_ratio_list: []
    }
  },
  mounted() {
    this.getContract()
    this.getProgress()
  },
  methods: {
    /**进度加*/
    increase() {
      if (this.form.progress_ratio >= this.progress_ratio && this.form.progress_ratio < 100) {
        this.form.progress_ratio += 10;
      }
    },
    /**进度减*/
    decrease() {
      if (this.form.progress_ratio > this.progress_ratio) {
        this.form.progress_ratio -= 10;
      }
    },
    /**获取数据字典*/
    async getContract() {
      var res = await this.$API.common.getDictData.get({
        type: 'follow_status'
      });
      this.follow_status = res.data.follow_status
    },
    /**获取数据字典*/
    async getProgress() {
      var res = await this.$API.common.getDictData.get({
        type: 'progress_ratio'
      });
      // let greaterThanTen = Array.isArray(res.data.progress_ratio)
      //     ? res.data.progress_ratio.filter(value => Number(value.value) > Number(this.progress_ratio))
      //     : [];
      res.data.progress_ratio.map(item => {
        this.progress_ratio_list.push({
          color: item.remark,
          percentage: Number(item.value)
        })
      })
      console.log('this.progress_ratio_list',this.progress_ratio_list)
    },
    //显示
    open(mode = 'add') {
      this.mode = mode;
      this.visible = true;
      return this
    },
    //表单提交方法
    submit(e) {
      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true;
          var res = [];
          res = await this.$API.task.addFollow.post(this.form);
          this.isSaveing = false;
          if (res != '') {
            if (res.code == 1) {
              this.visible = false;
              if (e == 1) {
                this.$emit('success', this.form, this.mode, e)
                this.$message.success("操作成功")
              } else {
                this.$emit('success', res.data, 'check')
              }
            } else {
              this.$alert(res.message, "提示", {type: 'error'})
            }
          }
        }
      })
    },
    //表单注入数据
    async setData(data) {
      this.form.id = data.id
      this.form.title = data.title
      this.progress_ratio = data.progress_ratio
      this.form.progress_ratio = Number(data.progress_ratio)
    },
  }
}
</script>

<style>
</style>
